<template>
  <div id="cover-map" style="height: 300px; width: 300px"></div>
</template>

<script>
export default {
  name: "CoverMap",
  methods: {
    coverMap() {
      // TODO 没写完，$.get有问题
      let svgUrl  = "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/geo/Beef_cuts_France.svg"
      // eslint-disable-next-line no-undef
      let svg = $.get(svgUrl)
      // 引入svg格式的地图
      this.$echarts.registerMap('beef', {svg: svg})
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('harmful-gas'));
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        visualMap: {
          left: 'center',
          bottom: '10%',
          min: 5,
          max: 100,
          orient: 'horizontal',
          text: [null, 'Price'],
          realtime: true,
          calculable: true,
          inRange: {
            color: ['#dbac00', '#db6e00', '#cf0000']
          }
        },
        series: [{
          name: 'French Beef Cuts',
          type: 'map',
          map: 'beef',
          roam: true,
          emphasis: {
            label: {
              show: false
            }
          },
          selectedMode: false,
          data: [
            { name: 'Queue', value: 15 },
            { name: 'Langue', value: 35 },
            { name: 'Plat de joue', value: 15 },
            { name: 'Gros bout de poitrine', value: 25 },
            { name: 'Jumeau à pot-au-feu', value: 45 },
            { name: 'Onglet', value: 85 },
            { name: 'Plat de tranche', value: 25 },
            { name: 'Araignée', value: 15 },
            { name: 'Gîte à la noix', value: 55 },
            { name: 'Bavette d\'aloyau', value: 25 },
            { name: 'Tende de tranche', value: 65 },
            { name: 'Rond de gîte', value: 45 },
            { name: 'Bavettede de flanchet', value: 85 },
            { name: 'Flanchet', value: 35 },
            { name: 'Hampe', value: 75 },
            { name: 'Plat de côtes', value: 65 },
            { name: 'Tendron Milieu de poitrine', value: 65 },
            { name: 'Macreuse à pot-au-feu', value: 85 },
            { name: 'Rumsteck', value: 75 },
            { name: 'Faux-filet', value: 65 },
            { name: 'Côtes Entrecôtes', value: 55 },
            { name: 'Basses côtes', value: 45 },
            { name: 'Collier', value: 85 },
            { name: 'Jumeau à biftek', value: 15 },
            { name: 'Paleron', value: 65 },
            { name: 'Macreuse à bifteck', value: 45 },
            { name: 'Gîte', value: 85 },
            { name: 'Aiguillette baronne', value: 65 },
            { name: 'Filet', value: 95 },
          ]
        }]
      }

      myChart.setOption(option)
    }
  },
  // mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作。
  // 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了
  mounted() {
    this.coverMap()
  }
}
</script>

<style scoped>

</style>